<template>
  <div>

  <a-popover title="提示" trigger="focus" :visible="showLength&&myValue.length<minLength">
    <template slot="content">
      <p>位数不能少于{{minLength}}</p>
    </template>

      <div v-if="warning" @mouseover="showTdStyle = true" @mouseleave="showTdStyle = false">
        <a-input ref="input1" :disabled="disabled" class="remind" v-model="myValue" @focus="showLengthStyle" @blur="setValue" @pressEnter="setValue"/>
        <div class="c_red" v-if="shwoerrorLength">位数不能少于{{minLength}}位</div>
        <div class="td_model" v-if="warning&&showTdStyle">
          <div class="title">校验提示</div>
            <p class="pt10" v-for="(iteam,index) in errMsg" :key="index">{{index+1}}.{{iteam}}</p>
        </div>
      </div>

      <!-- @blur="setValue" @pressEnter="setValue" -->
      <a-input ref="input1" v-else :disabled="disabled" class="notremind" v-model="myValue" @focus="showLengthStyle" @blur="setValue" @pressEnter="setValue"/>
      <div class="c_red" v-if="shwoerrorLength">位数不能少于{{minLength}}位</div>
    </a-popover>

  </div>
</template>

<script>
/* eslint-disable */
    export default {
      // name:
      data() {
        return {
          myValue:this.value,
          showTdStyle:false,
           showLength:false,
           shwoerrorLength:false
        }
      },
      methods: {
        isObjEmpty(str){
          if(str == null || str == ""){
            return true;
          }
        },
        showLengthStyle(){
          this.showLength=true
        },
        setValue(e){
          // console.log('e',e.target.value);
          this.showLength=false
          if(this.minLength&&e.target.value.length<this.minLength){
            this.shwoerrorLength=true
          }else{
            this.shwoerrorLength=false
          }
          this.$emit('input', this.myValue);
        },
      },
      props:{
        disabled:{// 输入框是否可操作
          type: Boolean,
          default:false,
        },
        errMsg:{// 错误提示信息
          type:Array,
          default:function(){
            return [];
          },
        },
        value:{// 数字框默认值
          type:String,
          default:"",
        },
        minLength:{
          type:Number,
          default:0
        }
      },
      computed:{
        warning(){
          if(this.errMsg == ''){
            return false;
          }
          return true;
        },
      },
      watch:{
        value(newVal) {
          this.myValue = newVal;
        },
        // myValue(newVal) {
        //   this.$emit('input', newVal)
        // },
      },
    }
</script>

<style scoped>
  .remind{
    border:2px solid #FF0000;
  }
    .td_model{
    position: fixed;
    right: 20px;
    top:20px;
    width: 400px;
    padding: 10px;
    box-shadow:  0 0 15px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    background: #ffffff;
    z-index: 10;
  }
  .td_model .title{
    font-size: 16px;
    font-weight: 700;
    border-bottom: 1px solid #eee;
  }
  .pt10{
    padding-top: 10px;
  }
  .c_red{
    color:#FF0000;
    font-size: 12px;
  }
</style>
